<template>
    <div class="search-box">
        <div class="start-time">
            <span class="titles">日期:</span>
            <el-date-picker style="width: 200px" v-model="timeValue" type="daterange" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="timeChoose" />
        </div>
        <div class="types">
            <span class="titles">类型:</span>
            <el-select v-model="formData.templateType" class="m-2" placeholder="请选择">
                <el-option v-for="item in typeList" :key="item.query" :label="item.authName" :value="item.query" />
            </el-select>
        </div>
        <div>
            <el-button type="info" @click="clearSearch">重置</el-button>
            <el-button type="danger" @click="getTable">搜索</el-button>
        </div>
    </div>
    <div class="tables-main">
        <div class="table-box">
            <el-table style="width: 90%;margin: 10px auto" :data="tableData" border :header-cell-style="{
                background: '#E7F2FF',
                color: 'black',
            }" v-loading="loading">
                <el-table-column prop="val" label="期别" width="150" align="center"/>
                <el-table-column prop="templateType" label="类型" width="180" align="center"/>
                <el-table-column prop="develop" label="填报人" width="220" align="center"/>
                <el-table-column prop="reportTime" label="上报时间" width="180" align="center"/>
                <el-table-column prop="reason" label="退回理由" width="400" align="left"/>
                <el-table-column label="操作" min-width="200" width="auto" fixed="right" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="getCheck(scope.row,'first')"  v-if="scope.row.templateId!='8'&&scope.row.templateId!='9'">查看</el-button>
                        <el-button link type="primary" size="small" @click="downReport(scope.row)"  v-if="scope.row.templateId!='8'&&scope.row.templateId!='9'">导出</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.tables-main {
    .table-box {
        width: 100%;
    }

    .pagination-box {
        width: 90%;
        margin: 30px auto;

        ::v-deep(.el-pagination) {
            float: right;
        }
    }
}

.search-box {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-around;
    align-items: center;
}

.titles {
    margin-right: 10px;
}
</style>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { reportExport, findCheckBack } from "@/util/api";
import { useRouter } from "vue-router";
import { ElMessage, genFileId ,ElMessageBox } from 'element-plus'
import { useStore } from '@/store'
import { path } from '../../router/path'
const userType = useStore().state.userInfo.userType
const userRole = useStore().state.userInfo.userRole
//路由
const router = useRouter();
//等待
const loading: any = ref(false)
//类型
const typeList: any = ref([])
const timeValue: any = ref([])
//报表数据
const tableData: any = ref([]);
const formData: any = ref({
    templateType: '',
    reportTimeStart: '',
    reportTimeEnd: ''
})
//获取退回报表
const getTable = async () => {
    let res: any = await findCheckBack(formData.value)
    console.log(res)
    if (res.code == 200) {
        tableData.value = res.data
    }
};
//日期选择
const timeChoose = () => {
    if (timeValue.value == null) {
        formData.value.reportTimeStart = '';
        formData.value.reportTimeEnd = '';
    } else {
        formData.value.reportTimeStart = timeValue.value[0];
        formData.value.reportTimeEnd = timeValue.value[1];
    }
}
//报表查看
const getCheck = (val: any,tabs:any) => {
    let url=null
    if(val.templateId=='5'){
    url=  router.resolve({
    path: '/dominantCheck',
    query: {
      id: val.reportId,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
    }) 
  }else if(val.templateId=='4'){
    url=  router.resolve({
    path: '/fourCheck',
    query: {
      id: val.reportId,
      radio1: val.templateId,
      tabs:tabs,
      isCheck:1,
    }
  })}else if(val.templateId=='100'){
    url= router.resolve({
    path: '/summary',
    query: {
      id: val.reportId,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }else if(val.templateId=='101'){
    url= router.resolve({
    path: '/staging',
    query: {
      id: val.reportId,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }else if(val.templateId=='102'){
    url= router.resolve({
    path: '/poor',
    query: {
      id: val.reportId,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }else{
    url=  router.resolve({
    path: '/check',
    query: {
      id: val.reportId,
      radio1: val.templateId,
      isCheck:1,
      tabs:tabs
    }
  })
  }
  window.open(url.href);
}

//导出
const downReport = (val: any) => {
    let name = val.name
    reportExport(val.id).then((res: any) => {
        let fileName = name + ".xlsx"
        handleFileError(res, fileName)
    })
}
const handleFileError = (res: any, fileName: any) => {
    if (typeof res.data !== 'undefined') {
        if (res.data.type === 'application/json') {
            const reader = new FileReader();
            reader.onload = function () {
                // const message = JSON.parse(reader.result).msg;

            };
            reader.readAsText(new Blob([res.data]));
        }
    } else {
        var downloadUrl = window.URL.createObjectURL(new Blob([res]));
        var a = document.createElement('a');
        a.style.display = 'none';
        a.href = downloadUrl;
        a.download = fileName;
        var event = new MouseEvent('click');
        a.dispatchEvent(event);
    }
};
//特殊报表导出
const downReports = (item:any)=>{
if(item.file==null)return ElMessage.error('无报表')
let  flieitem = JSON.parse(item.file)[0]
// console.log(flieitem)
let link = document.createElement('a')
  link.style.display = 'none';
  link.href = '/api/file/show/'+flieitem.saveName;
  link.download = flieitem.showName;
  link.click()
  window.URL.revokeObjectURL(link.href)
}
const matchByTypeAndPart = (v: any) => v.partType.includes(userType);
//重置搜索
const clearSearch = () => {
    timeValue.value = []
    formData.value = {
        templateType: '',
        reportTimeStart: '',
        reportTimeEnd: ''
    }
    getTable()
}
onMounted(() => {
    typeList.value = path[0].children.slice(5,path[0].children.length)
    if(userRole!='1')typeList.value =typeList.value.filter(matchByTypeAndPart)
    getTable();
});

</script>